<template>
  <div class="page-container">
    <div id="bgm-btn" v-bind:class="btnStyle" @click="controlBgm"></div>
    <audio id="audio" loop="loop" autoplay="autoplay" preload="auto">
      <source src="./assets/music/bgm.mp3" type="audio/mpeg">
    </audio>
    <router-view/>
  </div>
</template>

<script>
export default {

  name: 'App',

  data() {
    return {
      btnStyle: 'bgm-play',
    }
  },

  methods: {
    controlBgm: function() {
      let audio = document.getElementById('audio')
      if (audio.paused) {
        audio.play()
        this.btnStyle = 'bgm-play'
      } else {
        audio.pause()
        this.btnStyle = 'bgm-pause'
      }
    },
    autoPlayMusic: function() {
      // 监听微信h5自动播放bgm
      document.addEventListener('DOMContentLoaded', function () {
          document.addEventListener("WeixinJSBridgeReady", function () {
                let audio = document.getElementById('audio')
                audio.play()
            }, false)
        })
    }


  },

  mounted: function() {
    this.autoPlayMusic()    
  }
}
</script>

<style lang="scss">
  @import "./style/style";
</style>
